<template>
	<view>
		<view :class="{dpn: isShowSearch}">
			<!-- 导航栏 -->
			<uni-nav-bar fixed="true">
				<block slot="left">
					<image class="top-img" src="../../static/image/search/6.png" mode="widthFix"></image>
				</block>
				<view class="top-search flex-box" @click="openSearch()">
					<image class="search-icon" src="../../static/image/search/2.png" mode="widthFix"></image>
					周杰伦
				</view>
				<block slot="right">
					<image class="top-img" src="../../static/image/mine/r.png" mode="widthFix"></image>
				</block>
			</uni-nav-bar>
			<view class="page-content">
				<mescroll-uni >
					<!-- 轮播 -->
					<view class="banner">
						<swiper :indicator-dots="true" 
						        :autoplay="true" 
								indicator-color="rgba(255,255,255, .5)"
								indicator-active-color="#ff372b"
								:interval="3000" 
								:duration="500">
							<swiper-item v-for="(item,index) in swiper" :key="index">
								<view class="item">
									<image :src="item.imageUrl" class="img"></image>
									<view class="tag">
										{{item.typeTitle}}
									</view>
								</view>
							</swiper-item>
						</swiper>
					</view>
					<!-- 主入口 -->
					<view class="main-bar flex-box">
						<view class="flex-item" v-for="(item,index) in contentBar" :key="index">
							<image :src="'../../static/image/index/t_'+(index+1)+'.png'" class="img"></image>
							<view>
								{{item.name}}
							</view>
						</view>
					</view>
					<song-list title="推荐歌单" link="" :list="recommendSongs"></song-list>
					<!-- 新碟新歌 -->
					<view class="song-list">
						<view class="switch-line flex-box">
								<view class="flex-box">
									<view class="switch-item" :class="{on : newType==1}" @click="switchTab(1)">
										新碟
									</view>
									<view class="switch-item" :class="{on : newType==2}" @click="switchTab(2)">
										新歌
									</view>
								</view>
								<template v-if="newType==1">
									<view class="more">
										更多新碟
									</view>
								</template>
								<template v-if="newType==2">
									<view class="more">
										更多新歌
									</view>
								</template>
						</view>
					</view>
					<!-- 精选视频 -->
					<view class="video-list song-list">
						<view class="tit-bar">
							精选视频
							<view class="more fr">
								更多
							</view>
						</view>
						<view class="video-item" v-for="(item, index) in relatedVideo" :key="index">
							<image :src="item.cover" mode="" class="img"></image>
							<view class="desc ellipsis">
								{{item.name}}
							</view>
						</view>
					</view>
				</mescroll-uni>
			</view>
			
		</view>
		<search ref="search" @close="closeSearch()"></search>
	</view>
</template>

<script>
	import {apiGetBanner, apiGetRecommendSongs, apiGetTopAlbum, apiGetRelatedVideo} from '@/apis/index.js'
	import MescrollUni from '../../components/mescroll-uni/mescroll-uni.vue'
	import uniNavBar from '../../uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue'
	import songList from '../../components/songList.vue'
	import search from '../../components/search.vue'
	export default {
		components: {
			songList,
			search,
			MescrollUni,
			uniNavBar
		},
		data() {
			return {
				swiper: [],                    //轮播
				contentBar: [                  //主入口
					{name : '每日推荐'},
					{name : '歌单'},
					{name : '排行榜'},
					{name : '电台'},
					{name : '直播'},
				],
				recommendSongs: [],            //推荐歌单
				newType: 1,                    //新碟新歌类别  1--第一个  2--第二个
				latestAlbum: [],               //存储新碟新歌
				latestTempAlbum: [],           //临时变量
				relatedVideo: [],              //精选视频
				isShowSearch: false,           //是否显示搜索页
				
			}
		},
		onLoad() {
			this.getBanner();
			this.getRecommendSongs();
			this.getLatestAlbum();
			this.getRelatedVideo();
		},
		onShow() {
			console.log("index show")
		},
		onHide() {
			console.log("index hide")
		},
		onPullDownRefresh() {
			console.log("page refresh.");
			setTimeout(function () {
			    uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			getBanner() {
				apiGetBanner().then(res => {
					this.swiper = res.banners;
				})
			},
			//推荐歌单
			getRecommendSongs(){
				const params = {
					limit: 6
				}
				apiGetRecommendSongs(params).then(res => {
					
					//格式化播放量数据
					const formatCount = data=>{
						let tmp = data;
						if (data > 10000) {
							tmp = (parseInt(data/10000) + '万');
						}
						return tmp
					}
					
					this.recommendSongs = res.result;
					//格式化
					this.recommendSongs.forEach(item => {
						item.playCount = formatCount(item.playCount);
					})
				})
			},
			// 切换新碟新歌
			switchTab(type) {
				this.newType = type;
				// 设定开始start和结束end的位置
				let temp = {
					s: type == 1 ? 0 : 3,
					e: type == 1 ? 3 : 6
				}
				this.latestAlbum = this.latestTempAlbum.slice(temp.s, temp.e);
			},
			//新碟新歌  把前3首歌--新碟  后3首--新歌
			getLatestAlbum() {
				apiGetTopAlbum().then(res=>{
					//将所有的数据暂存在临时变量中
					this.latestTempAlbum = res.albums;
					//取前3个作为第一类的数据展示
					this.latestAlbum = res.albums.slice(0, 3);
				})
			},
			//精选视频
			getRelatedVideo() {
				const params = {
					id: 32154      //根据资源id查询
				}
				apiGetRelatedVideo(params).then(res=>{
					// console.log(res)
					this.relatedVideo = res.data;
				})
			},
			
			
			//打开搜索页
			openSearch() {
				//隐藏首页
				this.isShowSearch = true;
				//打开搜索页
				this.$refs.search.open();
			},
			//关闭搜索页
			closeSearch() {
				this.isShowSearch = false;
			}
		}
	}
</script>

<style lang="scss">
page {
	color: #1a1a1a;
	font-size: 24rpx;
}
.dpn{
	display: none;
}
.top-img {
	width: 50rpx;
	height: 50rpx;
	margin-top: 10rpx;
}
.top-search {
	width: 460rpx;
	/* #ifdef MP-WEIXIN */
	width: 460rpx;
	margin-left:-60rpx;
	/* #endif */
	height: 72rpx;
	margin-right: 24rpx;
	border-radius: 72rpx;
	color: #c6c6c6;
	background: #f7f7f7;
	align-items: center;
	justify-content: center;
	.search-icon {
		width: 28rpx;
		height: 29rpx;
		margin-right: 12rpx;
	}
}
.page-content {
	position: fixed;
	top: 64px;
	left: 0;
	right: 0;
	bottom: 0px;
	/* #ifdef H5 || MP-WEIXIN */
	top: 44px;
	/* #endif */
}
.banner {
	width: 100%;
	height: 268rpx;
	margin: 30rpx auto 44rpx;
	.swiper {
		height: 268rpx;
	}
	.item {
		position: relative;
		display: block;
		width: 686rpx;
		height: 268rpx;
		margin: 0 auto;
		border-radius: 14rpx;
		overflow: hidden;
	}
	.img {
		display: block;
		width: 100%;
		height: 100%;
	}
	.tag {
		position: absolute;
		bottom: 0;
		right: 0;
		height: 34rpx;
		padding: 0 14rpx;
		line-height: 34rpx;
		color: #fff;
		background: #43a5f0;
		z-index: 10;
		border-top-left-radius: 14rpx;
	}
}

.main-bar {
	padding-bottom: 22rpx;
	text-align: center;
	line-height: 70rpx;
	color: #666;
	border-bottom: 1rpx solid #e6e6e6;
	.img {
		display: block;
		width: 92rpx;
		height: 92rpx;
		margin: 0 auto;
	}
	.flex-item {
		position: relative;
		.date {
			position: absolute;
			left: 50%;
			top: 40rpx;
			line-height: 1;
			font-size: 24rpx;
			color: #ff392d;
			transform: translateX(-50%) scale(0.8);
		}
	}
}

.song-list {
	padding-left: 32rpx;
	.tit-bar {
		font-size: 34rpx;
		font-weight: 600;
		line-height: 110rpx;
	}

	.more {
		width: 150rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		margin-top: 30rpx;
		margin-right: 32rpx;
		color: #333;
		font-weight: 400;
		font-size: 24rpx;
		border: 2rpx solid #e6e6e6;
		border-radius: 50rpx;
	}
	.switch-line {
		justify-content: space-between;
		color: #999;
		.flex-box {
			line-height: 110rpx;
			width: 300rpx;
		}
		.switch-item {
			font-weight: 600;
			&:first-child {
				width: 80rpx;
			}
			&:last-child {
				padding-left: 22rpx;
			}
			&.on {
				color: #333;
				font-size: 34rpx;
			}
		}
	}
	.scroll-view {
		width: 100%;
		white-space: nowrap;
	}

	.item {
		position: relative;
		display: inline-block;
		width: 218rpx;
		padding-bottom: 16rpx;
		margin-right: 16rpx;
		line-height: 34rpx;
		&:before {
			content: ' ';
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 40rpx;
			z-index: 2;
			background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.2), transparent);
		}
		&.video {
			width: 450rpx;
		}
		.img {
			display: block;
			width: 100%;
			height: 218rpx;
			margin-bottom: 16rpx;
			background: #eee;
			border-radius: 10rpx;
		}
	}
	.count {
		position: absolute;
		top: 0;
		right: 0;
		padding-left: 25rpx;
		line-height: 34rpx;
		color: #fff;
		font-size: 24rpx;
		z-index: 10;
		background: url()
			no-repeat;
		background-size: 25rpx 25rpx;
		transform: scale(0.8);
	}
}
.video-list {
	padding-left: 0;
	.tit-bar {
		padding-left: 32rpx;
	}
	.video-item {
		width: 686rpx;
		height: 490rpx;
		margin: 0 auto;
		background: #f8f8f8;
		border-radius: 10rpx;
		overflow: hidden;
		margin-bottom: 24rpx;
	}
	.img {
		display: block;
		width: 686rpx;
		height: 390rpx;
		background: #eee;
	}
	.desc {
		padding-left: 40rpx;
		font-size: 30rpx;
		font-weight: 600;
		line-height: 100rpx;
	}
}

/*
	 *平台差异化处理的代码可以放在底部，这样有利于集中管理
	*/
/* #ifdef MP-WEIXIN */
.banner {
	margin-top: 60rpx;
}
/* #endif */
</style>